<template>
	
	<view class="header-box">
		<image src="/static/images/back.png" 
		class="add-image"
		@tap="goBack()"></image>
		
		<view class="header-item mr60" @click="changeTab(0)">
			<text :class="type==1 ? 'header-title-active' : 'header-title'">关注</text>
			<text :class="type==1 ? 'header-line-active' : 'header-line'"></text>
		</view>
		
		<view class="header-item mr60" @click="changeTab(1)">
			<text class="header-title">直播</text>
			<text class="header-line"></text>
		</view>
		
		<view class="header-item mr60right" @click="changeTab(2)">
			<text :class="type==2 ? 'header-title-active' : 'header-title'">视频</text>
			<text :class="type==2 ? 'header-line-active' : 'header-line'"></text>
		</view>
	</view>

	
</template>

<script>
export default {
	components: {
		
	},
	props: {
		type: {
			type: Number,
			default: 2
		}
	},
	data() {
		return {
			
		}
	},
	onLoad() {
		
	},
	onShow(){
		
	},
	methods: {
		goBack(){
			uni.navigateBack({
				delta: 1
			});
		},
		changeTab(type){
			if(type===0){
				uni.redirectTo({
					url:'/pages/video/video-focus-list'
				})
			}
			
			if(type===1){
				uni.switchTab({
					url: '/pages/index/video',
				})
			}
			
			if(type===2){
				uni.redirectTo({
					url:'/pages/video/video-list'
				})
			}
		}
	}
}
</script>

<style scoped>

.header-box{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	padding-top: 16rpx;
	padding-left: 24rpx;
	padding-right: 24rpx;
	
	/* background-color: #000; */
	z-index: 999;
	
	/* #ifdef MP */
	width: 100%;
	margin-top: 20rpx;
	/* #endif */
	
	/* #ifdef H5 */
	width: 100%;
	margin-top: 20rpx;
	/* #endif */
	
	/* #ifdef APP-PLUS */
	
	/* #endif */
}

.add-image{
	width: 40rpx;
	height: 40rpx;
	
	/* #ifdef MP */
	margin-right: 100rpx;
	transform: translateY(-6rpx);
	/* #endif */
	
	/* #ifdef H5 */
	margin-right: 130rpx;
	transform: translateY(-6rpx);
	/* #endif */

	/* #ifdef APP-PLUS */
	margin-right: 130rpx;
	transform: translateY(-6rpx);
	/* #endif */
}

.header-item{
	display: flex;
	align-items: center;
	flex-direction: column;
}

.header-title{
	font-size: 34rpx;
	font-weight: 400;
	color: #ffffff !important;
	line-height: 40rpx;
}

.header-title-active{
	font-size: 34rpx;
	font-weight: 700;
	color: #9C3728  !important;
	line-height: 40rpx;
}

.header-line{
	width: 32rpx;
	height: 6rpx;
	/* background: #000; */
	border-radius: 0rpx;
	opacity: 1;
	margin-top: 10rpx;
}

.header-line-active{
	width: 32rpx;
	height: 6rpx;
	background: #9C3728;
	border-radius: 0rpx;
	opacity: 1;
	margin-top: 10rpx;
}

.mr60{
	margin-right: 60rpx;
}

.mr60right{
	/* #ifdef MP */
	margin-right: 180rpx !important;
	/* #endif */
	
	/* #ifdef H5 */
	margin-right: 180rpx !important;
	/* #endif */
	
	/* #ifdef APP-PLUS */
	margin-right: 180rpx !important;
	/* #endif */
}
</style>